<template>
  <el-form :model="deptItem" ref="form" label-width="100px" size="mini">
    <el-button type="text" icon="el-icon-remove-outline" @click="deleteDept" class="deleteButton">删除部门</el-button>
    <el-col :span="6">
      <el-form-item :label="'部门' + (fatherIndex + 1)" prop="clientdept" required :show-message="false"> <el-input v-model="deptItem.clientdept" maxlength="40"></el-input></el-form-item>
    </el-col>
    <el-col :span="6" v-for="(workItem, index) in deptItem.children" :key="index">
      <el-form-item :label="'职务' + (index + 1)" :prop="'children.' + index + '.post'" required :show-message="false">
        <el-input v-model="workItem.post" maxlength="40"></el-input>
      </el-form-item>
    </el-col>
    <el-button type="text" icon="el-icon-circle-plus-outline" @click="addWork()" class="addButton">新增职务</el-button>
    <el-button type="text" icon="el-icon-remove-outline" @click="removeWork()" v-if="deptItem.children && deptItem.children.length >= 1">删除职务</el-button>
  </el-form>
</template>
<script>
/** mixins */
/** 子组件 */
/** 工具类 */
export default {
  name: 'deptForm',
  mixins: [],
  components: {},
  data() {
    return {
      deptItem: { clientdept: '', children: [{ post: '' }] },
      description: ''
    }
  },
  props: {
    fatherIndex: {
      type: Number,
      default: -1
    },
    model: {
      default: function() {
        return {}
      },
      type: Object
    }
  },
  methods: {
    deleteDept() {
      this.$emit('deleteDept', this.fatherIndex)
    },
    addWork() {
      this.deptItem.children.push({ post: '' })
    },
    removeWork() {
      this.deptItem.children.pop()
    },
    initDeptForm() {
      if (this.model) {
        this.deptItem = this.model
      }
    }
  },
  // 父子表单数据同步
  watch: {
    deptItem: {
      handler(newVal, oldVal) {
        this.$emit('dataChange', this.fatherIndex, newVal)
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
.addButton {
  margin-left: 53px;
  margin-bottom: 5px;
}
.deleteButton {
  position: absolute;
  left: -30px;
  top: -3px;
}
/deep/ .el-input__inner {
  padding: 0 27px 0 1px;
}
</style>
